<template>
  <view class="container">
    <u--form
      ref="addressRef"
      labelWidth="70"
      labelAlign="right"
      labelPosition="left"
      :model="shipAddress"
      :rules="addressRules"
    >
      <u-form-item label="收货人" prop="name">
        <u--input
          clearable
          maxlength="10"
          v-model="shipAddress.name"
          placeholder="名字"
        ></u--input>
      </u-form-item>
      <u-form-item label="手机号码" prop="phone">
        <u--input
          clearable
          type="number"
          maxlength="11"
          v-model="shipAddress.phone"
          placeholder="手机号码"
        ></u--input>
      </u-form-item>
      <u-form-item label="所在地区" prop="class_A" @click="clickAddress">
        <view class="selectAddres" v-if="!!addressClass">{{
          addressClass
        }}</view>
        <view class="selectAddres selectAddres2" v-else>请选择所在地区</view>
        <!-- <u--input :value="addressClass" placeholder="请选择所在地区"></u--input> -->
      </u-form-item>
      <u-form-item label="详细地址" prop="class_D">
        <u--textarea
          clearable
          maxlength="20"
          placeholder="详细地址"
          v-model="shipAddress.class_D"
        ></u--textarea>
      </u-form-item>
    </u--form>
    <view v-if="shipAddress.id" class="delete" @click="deleteAddress"
      ><uni-icons type="trash-filled" color="#de4141" size="36rpx"></uni-icons
      >删除该地址</view
    >
    <u-popup :show="show">
      <van-area
        value="440106"
        :area-list="areaList"
        title="请选择收货地址"
        @confirm="confirmArea"
        @cancel="cancelArea"
      />
    </u-popup>
    <!-- 收货地址 -->
    <view class="bom_box">
      <view class="btn" @click="saveShipAddre">保 存</view>
    </view>
  </view>
</template>

<script>
import { areaList } from '@vant/area-data'
import { addOrUpdateAddressApi, addressDelApi } from '@/API/Shop'
import { mapState, mapMutations } from 'vuex'
export default {
  name: 'ShipAddress',
  data() {
    return {
      areaList,
      show: false,
      shipAddress: {
        uuid: '',
        name: '',
        phone: '',
        class_A: '',
        class_B: '',
        class_C: '',
        class_D: ''
      },
      addressRules: {
        name: {
          type: 'string',
          required: true,
          message: '请填写姓名',
          trigger: ['blur', 'change']
        },
        phone: {
          type: 'string',
          required: true,
          message: '请填写手机号',
          trigger: ['blur', 'change']
        },
        class_A: {
          type: 'string',
          required: true,
          message: '请选择所在地',
          trigger: ['blur', 'change']
        },
        class_D: {
          type: 'string',
          required: true,
          message: '请填写详细地址',
          trigger: ['blur', 'change']
        }
      },
      baseUrl: this.$baseUrl
    }
  },
  computed: {
    ...mapState(['loginInfo']),
    addressClass() {
      let temp = this.shipAddress
      if (temp.class_A === '') return ''
      return `${temp.class_A} ${temp.class_B} ${temp.class_C}`
    }
  },
  methods: {
    confirmArea(e) {
      // console.log(e.detail)
      let temp = e.detail.values
      this.shipAddress.class_A = temp[0].name
      this.shipAddress.class_B = temp[1].name
      this.shipAddress.class_C = temp[2].name
      this.show = false
    },
    cancelArea() {
      this.show = false
    },
    saveShipAddre() {
      this.$refs.addressRef
        .validate()
        .then(async res => {
          const {
            data: { message, code }
          } = await addOrUpdateAddressApi(this.shipAddress)
          if (code == 200) {
            this.amendAddress(this.shipAddress)
            uni.$showMsg(`${message}`)
            uni.navigateBack()
          }
        })
        .catch(errors => {
          // uni.$showMsg(`请填写完整收货信息！`)
        })
    },
    clickAddress() {
      this.show = true
    },
    // 删除地址
    async deleteAddress() {
      let id = this.shipAddress.id
      const {
        data: { code, message }
      } = await addressDelApi({ id })
      if (code == 200) {
        this.updateAddress({ del: true, id })
        uni.$showMsg(`${message}`)
        uni.navigateBack()
      }
    },
    ...mapMutations(['updateAddress', 'amendAddress'])
  },
  onLoad(options) {
    this.shareMixin.title = `收货地址`
    this.shareMixin.path = `/pages/Shop/ShopAdmin`
    const info = JSON.parse(decodeURIComponent(options.info))
    console.log('dddd', info)
    if (Object.keys(info).length > 0) {
      this.shipAddress = { ...info }
    } else {
      this.shipAddress.uuid = this.loginInfo.uuid
    }
  }
}
</script>

<style scoped lang="scss">
.container {
  width: 90%;
  margin: 0 auto;
  height: 100%;

  .delete {
    margin: 20rpx auto;
    color: $theme-color;
    font-size: 24rpx;
    // text-align: center;
    background-color: #fff;
  }
  // background-color: #f8f9f8;
  // 添加收货地址
  .bom_box {
    width: 100%;
    height: 130rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    .btn {
      width: 80%;
      line-height: 70rpx;
      text-align: center;
      background-color: $theme-color;
      border-radius: 35rpx;
      color: #f8f9f8;
    }
  }
}
.selectAddres {
  line-height: 44rpx;
  padding-top: 6px;
  padding-bottom: 6px;
  padding-left: 9px;
  padding-right: 9px;
  border-width: 0.5px !important;
  border-color: #dadbde;
  border-style: solid;
  border-radius: 4px;
}
.selectAddres2 {
  font-size: 15px;
  color: #bbb;
}
</style>
